<script lang="ts" setup>
import { ref, useTemplateRef, inject, watch } from 'vue'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { navBarHeightKey } from '@/views/product/reno14-pro/symbol-key.ts'
import { useGsapContext } from '@/hooks'
import Accordion from '@/components/accordion/accordion.vue'
import AccordionItem from '@/components/accordion/accordion-item.vue'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

defineProps<{
  data: {
    mainTitle: string
    subtitle: string
    list: {
      key: number
      mainTitle: string
      subtitle: string
      media:
        | {
            type: 'video'
            src: string
          }
        | {
            type: 'img'
            src: Record<string, string>
          }
    }[]
  }
}>()
const navBarHeight = inject(navBarHeightKey)
const { scrollGroup } = useScrollGroup()

const containerRef = useTemplateRef<HTMLUListElement | null>('containerRef')

useGsapContext(() => {
  if (!containerRef.value) {
    return
  }

  ScrollTrigger.create({
    trigger: containerRef.value,
    start: 'top bottom',
    end: () => `bottom ${navBarHeight?.value}`,
    invalidateOnRefresh: true,
    onToggle: async (self) => {
      if (self.isActive) {
        await videoPlay()
      } else {
        stopVideo()
      }
    },
    ...scrollGroup,
  })
})

const activatedItem = ref(0)
const getActiveVideo = () => {
  if (!containerRef.value) {
    return null
  }

  return containerRef.value.querySelector(
    `div[data-media="${activatedItem.value}"] video`,
  ) as HTMLVideoElement | null
}
const videoPlay = async () => {
  const videoInstance = getActiveVideo()
  if (videoInstance) {
    await videoInstance.play().catch()
  }
}
const stopVideo = () => {
  const videoInstance = getActiveVideo()
  if (videoInstance) {
    videoInstance.pause()
    videoInstance.currentTime = 0
  }
}
const replay = async () => {
  await videoPlay()
}

watch(
  () => activatedItem.value,
  async () => {
    stopVideo()
    await videoPlay()
  },
)

const playing = ref(false)
</script>

<template>
  <div ref="containerRef">
    <div class="text-3xl mt-[13vw] mb-[6.5vw] sm:mt-[9.63vw]">
      <p>{{ data.mainTitle }}</p>
      <p>{{ data.subtitle }}</p>
    </div>

    <Accordion v-model="activatedItem">
      <AccordionItem
        v-for="i in data.list"
        :key="i.key"
        :title="i.mainTitle"
        :item-key="i.key"
        :subtitle="i.subtitle"
        class="accordion-item"
      >
        <div :data-media="i.key" class="w-full h-[65.15vw] overflow-hidden">
          <template v-if="i.media.type === 'video'">
            <div v-if="activatedItem === i.key" class="w-full h-full relative">
              <video
                :src="i.media.src"
                class="w-full h-[110%] object-cover -translate-y-[9%]"
                muted
                autoplay
                @play="playing = true"
                @ended="playing = false"
              ></video>

              <div
                class="absolute w-full bottom-0 left-0 grid justify-center gap-x-[4%] gap-y-[2px] grid-cols-[repeat(2,25.5%)] auto-rows-min mb-[2%]"
              >
                <img
                  alt=""
                  class="w-full h-[1.375rem]"
                  src="@/views/product/reno14-pro/image/3/images-pocket-voice-0-1.png.webp"
                />
                <img
                  alt=""
                  class="w-full h-[1.375rem]"
                  src="@/views/product/reno14-pro/image/3/images-pocket-voice-1-1.png.webp"
                />
                <p class="text-xs text-[text-sm] text-center">环境噪音</p>
                <p class="text-xs text-[text-sm] text-center">环境噪音</p>
                <p class="text-sm text-center">普通手机</p>
                <p class="text-sm text-nowrap text-center">OPPO Reno14 Pro</p>
              </div>

              <svg
                v-show="!playing"
                class="w-[2rem] aspect-square absolute bottom-[3%] right-[3%]"
                @click="replay"
              >
                <use href="#icon-replay" />
              </svg>
            </div>
          </template>

          <template v-else-if="i.media.type === 'img'">
            <picture v-if="activatedItem === i.key" class="w-full h-full block">
              <source :srcset="i.media.src['360']" media="(max-width: 640px)" />
              <source :srcset="i.media.src['640']" media="(max-width: 1024px)" />
              <source :srcset="i.media.src['1024']" media="(max-width: 1440px)" />
              <source :srcset="i.media.src['1440']" media="(min-width: 1440px)" />
              <img
                :src="i.media.src['360']"
                alt=""
                class="w-full h-full object-cover"
                loading="lazy"
              />
            </picture>
          </template>
        </div>
      </AccordionItem>
    </Accordion>
  </div>
</template>

<style scoped>
.accordion-item:deep(.main-title) {
  background-color: #fafafa;
}
</style>
